<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 为了提升循环显示的性能，我们一般在每一个循环上加一个惟一的key值 -->
        <div v-for="(item,index) in list" :key="item.id">{{item.text}}-------------{{index}}</div>

        <!-- 当我们想要向VUE数组中添加元素是，不能使用数组下标的方式实现，如vm.list[4]={id:"002",text:"sasqs"}，因为虽然实际上已经添加进数组里，但是不会被渲染到页面上 -->
        <!-- 所以我们要使用数组自己的push方法添加数组元素，这样才会被渲染到页面上。 -->

        <!-- pop、push、unshift、shift、splice、sort、reverse -->


        <!-- 对象的遍历使用ofkey代表键-->
        <div v-for="(item,key,index) of userInfo">{{item}}-------{{key}}--------{{index}}</div>

    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                list: [{
                    id: "010201318",
                    text: "hello",
                },
                {
                    id: "010201317",
                    text: "dell"
                },
                {
                    id: "010201315",
                    text: "nice",
                },
                {
                    id: "014201318",
                    text: "meet",
                }],

                userInfo: {
                    username: "zzj",
                    age: 20,
                    sex: "male",

                }

            }
        })
    </script>
</body>

</html>